<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-pie-chart"></i> schart图表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="plugins-tips">
                vue-schart：vue.js封装sChart.js的图表组件。
                访问地址：
                <a
                    href="https://github.com/lin-xin/vue-schart"
                    target="_blank"
                >vue-schart</a>
            </div>
            <div class="schart-box">
                <div class="content-title">柱状图</div>
                <schart :options="options1" canvasId="bar" class="schart"></schart>
            </div>
            <div class="schart-box">
                <div class="content-title">折线图</div>
                <schart :options="options2" canvasId="line" class="schart"></schart>
            </div>
            <div class="schart-box">
                <div class="content-title">饼状图</div>
                <schart :options="options3" canvasId="pie" class="schart"></schart>
            </div>
            <div class="schart-box">
                <div class="content-title">环形图</div>
                <schart :options="options4" canvasId="ring" class="schart"></schart>
            </div>
        </div>
    </div>
</template>

<script>
	import Schart from 'vue-schart';
	
	export default {
		name: 'basecharts',
		components: {
			Schart
		},
		data () {
			return {
				options1: {
					type: 'bar',
					title: {
						text: '最近一周各品类销售图'
					},
					bgColor: '#fbfbfb',
					labels: ['周一', '周二', '周三', '周四', '周五'],
					datasets: [
						{
							label: '家电',
							fillColor: 'rgba(241, 49, 74, 0.5)',
							data: [234, 278, 270, 190, 230]
						},
						{
							label: '百货',
							data: [164, 178, 190, 135, 160]
						},
						{
							label: '食品',
							data: [144, 198, 150, 235, 120]
						}
					]
				},
				options2: {
					type: 'line',
					title: {
						text: '最近几个月各品类销售趋势图'
					},
					bgColor: '#fbfbfb',
					labels: ['6月', '7月', '8月', '9月', '10月'],
					datasets: [
						{
							label: '家电',
							data: [234, 278, 270, 190, 230]
						},
						{
							label: '百货',
							data: [164, 178, 150, 135, 160]
						},
						{
							label: '食品',
							data: [114, 138, 200, 235, 190]
						}
					]
				},
				options3: {
					type: 'pie',
					title: {
						text: '服装品类销售饼状图'
					},
					legend: {
						position: 'left'
					},
					bgColor: '#fbfbfb',
					labels: ['T恤', '牛仔裤', '连衣裙', '毛衣', '七分裤', '短裙', '羽绒服'],
					datasets: [
						{
							data: [334, 278, 190, 235, 260, 200, 141]
						}
					]
				},
				options4: {
					type: 'ring',
					title: {
						text: '环形三等分'
					},
					showValue: false,
					legend: {
						position: 'bottom',
						bottom: 40
					},
					bgColor: '#fbfbfb',
					labels: ['vue', 'react', 'angular'],
					datasets: [
						{
							data: [500, 500, 500]
						}
					]
				}
			};
		}
	};
</script>

<style scoped>
    .schart-box {
        display: inline-block;
        margin: 20px;
    }
    
    .schart {
        width: 600px;
        height: 400px;
    }
    
    .content-title {
        clear: both;
        font-weight: 400;
        line-height: 50px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }
</style>
